<template>
  <ElTabs v-model="activeTab" tab-position="left">
    <ElTabPane label="页面库" name="layout">
      <template #label>
        <ElTooltip content="页面库" effect="dark" placement="right">
          <ElIcon :size="20">
            <Icon icon="layout"></Icon>
          </ElIcon>
        </ElTooltip>
      </template>
      <PagePanel ref="pagePanelRef" :designer="designer"></PagePanel>
    </ElTabPane>
    <ElTabPane label="实体库" name="entity">
      <template #label>
        <ElTooltip content="实体库" effect="dark" placement="right">
          <ElIcon :size="20">
            <Icon icon="reconciliation"></Icon>
          </ElIcon>
        </ElTooltip>
      </template>
      <EntityPanel :designer="designer"></EntityPanel>
    </ElTabPane>
    <ElTabPane label="组件库" name="widget">
      <template #label>
        <ElTooltip content="组件库" effect="dark" placement="right">
          <ElIcon :size="20">
            <Icon icon="office-building"></Icon>
          </ElIcon>
        </ElTooltip>
      </template>
      <WidgetPanel></WidgetPanel>
    </ElTabPane>
  </ElTabs>
</template>

<script setup lang="ts" name="SettingPanel">
import { ref } from "vue";
import { ElTabs, ElTabPane, ElTooltip, ElIcon } from "element-plus";
import { Icon } from "@/components/Icon";
import WidgetPanel from "./WidgetPanel/index.vue";
import EntityPanel from "./EntityPanel/index.vue";
import PagePanel from "./PagePanel/index.vue";
const activeTab = ref("layout");
defineProps({
  designer: {
    type: Object
  }
});
</script>

<style scoped></style>
